<template>
  <view class="article-list">
    <view 
      class="article-item" 
      v-for="(item, index) in articleList" 
      :key="index"
      @click="handleArticleClick(item)"
    >
      <view class="article-content">
        <text class="article-title">{{ item.title }}</text>
        <text class="article-date">{{ item.date }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { RouterMethods } from '@/utils/router'

// 格式化日期的函数
const formatDate = (dateString) => {
  const date = new Date(dateString)
  const year = date.getFullYear()
  const month = (date.getMonth() + 1).toString().padStart(2, '0')
  const day = date.getDate().toString().padStart(2, '0')
  return `${year}年${month}月${day}日`
}

// 添加 props 定义
const props = defineProps({
  articles: {
    type: Array,
    default: () => []
  }
})

// 使用传入的文章数据替换本地数据
const articleList = computed(() => props.articles)

// 点击文章处理函数
const handleArticleClick = (article) => {
  // 跳转到文章详情页，并传递文章ID
  RouterMethods.toArticleDetail({
    id: article.id
  })
}
</script>

<style scoped>
.article-list {
  /* background-color: greenyellow; */
}

.article-item {
  height: 88rpx;
/*  padding: 26rpx; */
  margin-bottom: 10rpx;
  background: #FFFFFF;
  box-shadow: 0px 0px 6px 0px rgba(173,173,173,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.article-item:last-child {
  margin-bottom: 0rpx;
}

.article-content {
  width:100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 44rpx;
  padding:20rpx;
}

.article-title {
 font-family: PingFangSC-Regular;
 font-size: 24rpx;
 color: #000000;
 letter-spacing: 0;
 font-weight: 400;
}

.article-date {
 font-family: PingFangSC-Regular;
 font-size: 20rpx;
 color: #515151;
 letter-spacing: 0;
 font-weight: 400;
}
</style> 